//理财产品
import React from 'react';
import { connect } from 'dva';
import { message, Tooltip } from 'antd';
import { AdvancedSearch, DATA_ENTRY, ModalC, PrimaryC, TableC, ExportC } from '../../../../comps';
import myStyle from '../index.less';
//组件
import RightInfo from '../shareComp/rightInfo';
import MyModal from './myModal';
class FinancialProduct extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedRowKeys: [], //选中的checkbox
      searchObj: {}, //查询的条件 默认查询条件
      currentPage: 1,
      numInPage: 10,
      total: 0,
      columnsCurrent: [
        {
          title: '内部编码',
          key: 'insidecode',
        },
        {
          title: '产品名称',
          key: 'productName',
        },
        {
          title: '人行产品代码',
          key: 'bankProductCode',
        },
        {
          title: '人行资产池代码',
          key: 'bankAssetCode',
        },
      ],
      isReset: false, // 是否点击重置
      type: undefined, //目前点击的是新增的状态
      visible: false, //弹窗
      count: 0, //未补充总条数
      rowData: undefined, //编辑数据
    };
  }
  componentDidMount() {
    this.getTableData();
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.tenant != this.props.tenant) {
      this.getTableData();
    }
  }
  //查询
  onQuery = (e) => {
    //   console.log(e)
    this.setState(
      {
        isReset: false,
        currentPage: 1,
        searchObj: e,
      },
      () => {
        this.getTableData();
      },
    );
  };
  //重置
  onClear = () => {
    this.setState({
      isReset: true,
    });
    //租户也重置
    this.props.resetTenant();
  };
  //表格分页切换
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    const { isReset } = this.state;
    if (isReset) {
      //判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      return;
    }
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.getTableData();
      },
    );
  };
  // 获取表格数据
  getTableData = () => {
    const { currentPage, numInPage, searchObj } = this.state;
    this.setState(
      {
        dataSource: undefined,
        columns: undefined,
      },
      () => {
        this.props.dispatch({
          type: 'financialProductM/getDataList',
          payload: {
            ...searchObj,
            currentPage,
            numInPage,
            tenant: this.props.tenant, //租户入参
          },
          callback: (data) => {
            if (data) {
              this.setState({
                dataSource: data.dataSource || [],
                total: data.pageInfo && data.pageInfo.total,
                columns: this.state.columnsCurrent,
                count: data.count || 0,
              });
            } else {
              this.setState({
                dataSource: [],
                total: 0,
                columns: this.state.columnsCurrent,
                count: 0,
              });
            }
          },
        });
      },
    );
  };

  //新增
  add = () => {
    this.setState({
      visible: true,
      type: 'add',
    });
  };
  //批量确认
  confirm = () => {
    this.props.dispatch({
      type: 'financialProductM/batchConfirm',
      payload: { data: [...this.state.selectedRowKeys] },
      callback: (data) => {
        if (data) {
          message.success('批量确认成功！');
          this.setState({ selectedRowKeys: [] });
          this.getTableData(); //刷新列表
        }
      },
    });
  };
  //点击编辑出现弹窗
  handleFn = (record) => {
    // console.log(record)
    this.setState({
      visible: true,
      type: 'edit',
      rowData: record,
    });
  };
  //改变列
  handleColumns = (columns) => {
    if (columns && columns.length) {
      if (columns[columns.length - 1].title != '操作') {
        columns.push({
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          type: 'operate',
          fixed: 'right',
          operates: [
            {
              title: '编辑',
              onClick: (record, index) => {
                this.handleFn(record);
              },
            },
          ],
        });
      }
    }
  };
  //改变勾选
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys });
  };
  //弹窗点击确认
  onOk = () => {
    let data = this.state.EditModal.getInfo();
    if (!data) return;
    this.props.dispatch({
      type: 'financialProductM/saveData',
      payload: {
        ...data,
        id: this.state.type == 'edit' ? this.state.rowData?.id : undefined,
      },
      callback: (data) => {
        if (data) {
          this.getTableData();
          this.setState({ rowData: undefined, visible: false });
        }
      },
    });
  };
  //弹窗点击取消
  onCancel = () => {
    this.setState({
      visible: false,
    });
    if (this.state.type == 'edit') this.setState({ rowData: undefined });
  };
  render() {
    const { searchObj, columns, dataSource, currentPage, total, numInPage, selectedRowKeys, visible, type } = this.state;
    const { loading } = this.props;
    this.handleColumns(columns);
    const advanceProps = [
      {
        dataIndex: 'codeName',
        title: '名称',
        type: DATA_ENTRY.INPUT,
        allowClear: true,
      },
      {
        dataIndex: 'isConfirm',
        title: '是否已确认',
        isTrueFalseJudge: true,
        type: DATA_ENTRY.SELECT,
        allowClear: true,
      },
    ];
    //多选框
    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: (record) => ({
        disabled: record.isConfirm === '1',
      }),
    };
    return (
      <div>
        <AdvancedSearch dataSource={advanceProps} onQuery={this.onQuery} onClear={this.onClear} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '20px' }}>
          <div style={{ display: 'flex', alignContent: 'center' }}>
            <div>
              <PrimaryC title='新增' onClick={this.add}></PrimaryC>
            </div>
            <div style={{ marginLeft: '16px', marginRight: '20px' }}>
              <PrimaryC title='批量确认' loading={loading.effects['financialProductM/batchConfirm'] == true} onClick={this.confirm} disabled={!selectedRowKeys?.length}></PrimaryC>
            </div>
            <div style={{ marginRight: '20px' }}>
              <ExportC
                url={'gateway/instrument-server/financingProductRegulation/financingExport'}
                search={{ ...searchObj, tenant: this.props.tenant }}
                disabled={dataSource?.length ? false : true}
              />
            </div>
          </div>
          <div style={{ display: 'flex' }}>
            <RightInfo noLeft={true} hasRight={true} redTitle={'对应色块代表该数据不完整'}></RightInfo>
          </div>
        </div>
        <div style={{ marginTop: '16px', position: 'relative' }}>
          <TableC
            columns={columns}
            dataSource={dataSource}
            current={currentPage}
            total={total || 0}
            pageSize={numInPage}
            rowKey='id'
            scroll={{ x: 'max-content' }}
            onChange={this.handleTableChange}
            rowSelection={rowSelection}
            rowClassName={(record) => {
              return record.isSuppleInfo === '1' ? myStyle.redCls : record.isConfirm === '1' ? myStyle.greenCls : '';
            }}
          ></TableC>
        </div>
        {visible && (
          <ModalC
            visible={visible}
            onOk={this.onOk}
            onCancel={this.onCancel}
            title={type == 'add' ? '新增' : '编辑'}
            width={750}
            confirmLoading={loading.effects['financialProductM/saveData'] == true}
            destroyOnClose={true}
            maskClosable={false}
          >
            <MyModal
              type={type}
              detailData={_.cloneDeep(this.state.rowData)}
              onRef={(ref) => {
                this.state.EditModal = ref;
              }}
            />
          </ModalC>
        )}
      </div>
    );
  }
}
export default connect(({ financialProductM, loading }) => ({ financialProductM, loading }))(FinancialProduct);
